<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Jewel - Pieces Of UK</title>
<link type="text/css" href="Styles/ui.all.css" rel="stylesheet">
<style type="text/css" media="screen">
<!--
.outer {
  position: absolute;
  z-index: 999;
}

#player0Outer {
}

#player1Outer {

}

-->
</style>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7/jquery-ui.min.js" type="text/javascript"></script>

<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/swfobject/2.1/swfobject.js" type="text/javascript"></script>

  <script type="text/javascript" charset="utf-8">
<!--
if (typeof PIECESOFUK == "undefined") {
	var PIECESOFUK = {};
}

var leftPos = 0;
var vidWidth = 372;
var vidHeight = 298;
var vidWidth = 320;
var vidHeight = 240;
var vidWidth = 240;
var vidHeight = 192;

var vidIds = ['6yy8Bqaytio', 'z42jA3OOECc' ];

var dev_key = "AI39si5ZGB1rIF7dhn6_iSVb4cODOTLb1mNXMZh4w9SkHBfRvgquafK9yvbRIchpmQLMb37fQBU4EZMm1SkjvysIKKDcNtIPcw"
var params = { allowScriptAccess: "always", wmode: "transparent" };
var atts = { id: "myytplayer0" };
var ytplayer = null;

swfobject.embedSWF("http://gdata.youtube.com/apiplayer?key=" + dev_key + "&enablejsapi=1&playerapiid=ytplayer0",
                       "ytapiplayer0", vidWidth, vidHeight, "8", null, null, params, atts);
var atts = { id: "myytplayer1" };
swfobject.embedSWF("http://gdata.youtube.com/apiplayer?key=" + dev_key + "&enablejsapi=1&playerapiid=ytplayer1",
                       "ytapiplayer1", vidWidth, vidHeight, "8", null, null, params, atts);


$(document).ready( function() {

});


function onYouTubePlayerReady(playerId) {

  var theNum = playerId.match(/ytplayer(\d*)/)[1];
  playerListeners[theNum] = stateChange;
//  $("#myytplayer"+theNum)[0].addEventListener('onStateChange', 'stateChange');
  $("#myytplayer"+theNum)[0].addEventListener('onStateChange', 'playerListeners['+theNum+']');
  $("#myytplayer"+theNum)[0].cueVideoById(vidIds[theNum], 0);
 //   $("#myytplayer"+theNum)[0].setVolume(0);
    $("#myytplayer"+theNum).parent().css("left", leftPos + "px");
    leftPos += vidWidth;
    $("#player"+theNum+"Outer").hover(function() {
        $(".outer").find("object").each( function() {
//          $(this)[0].setVolume(0);
          $(this)[0].pauseVideo();
        });
//        $("#myytplayer"+theNum)[0].setVolume(100);
        $("#myytplayer"+theNum)[0].playVideo();

    }, function() {

    });

}

var playerListeners = {};

/*
aVideo = function(id) {
  var vid = this;
  this.id = id;
  this.num = id.match(/ytplayer(\d*)/)[1];
  $("#myytplayer"+this.num)[0].cueVideoById(vidIds[this.num], 0);
  $("#myytplayer"+this.num).parent().css("left", leftPos + "px");
  leftPos += vidWidth;


// this works if stateChange is outside of aVideo  $("#myytplayer"+this.num)[0].addEventListener('onStateChange', 'stateChange');
//  $("#myytplayer"+this.num)[0].addEventListener('onStateChange', 'function(newState) { stateChange(newState) }');
  playerListeners[this.num] = stateChange;
  $("#myytplayer"+this.num)[0].addEventListener('onStateChange', 'playerListeners.'+this.num);
  $("#player"+this.num+"Outer").hover(function() {
    $(".outer").find("object").each( function() {
      $(this)[0].pauseVideo();
    });
    $("#myytplayer"+vid.num)[0].playVideo();
  }, function() { });


}

*/
  function stateChange(newState, vid) {
    debugger;
    console.log(newState);
  }

-->
</script>

</head>
<body>
<noscript>You need to enable Javascript to view this site at its best</noscript>
<div id="player0Outer" class="outer">
  <div id="ytapiplayer0"></div>
</div>
<div id="player1Outer" class="outer">
  <div id="ytapiplayer1"></div>
</div>
</body>
</html>
